<template>
  <div class="headerwrap wrap">
    <!-- logo -->
   <h1>
    <img src="../assets/img/indexLogo.6f8ac4f0.png" alt="">
   </h1>
   <!-- 导航 -->
   <ul class="navs">
    <li :class="{active:$route.path=='/home'}" @click="$router.push('/home')">首页</li>
    <li :class="{active:$route.path=='/goods'}" @click="$router.push('/goods')">全部商品</li>
    <li :class="{active:$route.path=='/user'}" @click="$router.push('/user')">个人中心</li>
    <li :class="{active:$route.path=='/order'}" @click="$router.push('/order')">我的订单</li>
    <li :class="{active:$route.path=='/free'}" @click="$router.push('/free')">专属福利</li> 
   </ul>
   <!-- 搜索 -->
   <div class="search">
    <input type="text" placeholder="请输入关键字" v-model="txtVal">
    <span @click="searchFn">
      <img src="../assets/img/search.png" alt="" class="search-btn">
    </span>
   </div>
  </div>
</template>

<script>
export default {
data(){
  return{
      txtVal:''
  }
},
methods:{
  searchFn(){
  this.$router.push(`/goods?keyword=${this.txtVal}`)
  this.txtVal=""
  }
}
}
</script>

<style lang = "less" scoped>
.headerwrap {
  height: 118px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
 
  .navs {
    width: 500px;
    display: flex;
    justify-content: space-between; 
    cursor: pointer;
    /* li{
         &:hover {
      color: #0a328e;
    }
    } */
 .active{
  color: #0a328e;
  font-weight: 600;
 }
  } 
  .search{
    display: flex; 
    input {
      width: 214px;
      height: 40px;
      border: 1px solid #dedede;
      border-radius: 20px 0 0 20px;
      box-sizing: border-box;
      /* padding-left: 19px; */
      text-indent: 1em;
      outline-style: none;
    }
    span {
      width: 50px;
      height: 40px;
      background: #0a328e;
      border-radius: 0px 20px 20px 0px;
      text-align: center;
      line-height: 40px;
    }
    .search-btn {
      width: 15px;
      height: 15px;
    }
  }
}
</style>